#include("../layout.html")
#set(PATH='/core/orgnazation')
#@layout()

#define css()
<link href="#(CTX)/css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="#(CTX)/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

<style>
    .jstree-open > .jstree-anchor > .fa-folder:before {
        content: "\f07c";
    }

    .jstree-default .jstree-icon.none {
        width: 0;
    }
</style>
#end

#define js()
<!-- jsTree plugin javascript -->
<script src="#(CTX)/js/plugins/jsTree/jstree.min.js"></script>

<!-- Bootstrap table -->
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- jquery.form -->
<script src="#(CTX)/js/plugins/form/jquery.form.min.js"></script>

<script>
    _dictKit = _GetDictKit("OrgnazationRank");
</script>

<script>
    <!-- 编辑新增对话框js,如有需要请导出到对应的对话框js文件中 -->
    var orgnazationDialog = function () {
        var modal = $('#orgnazationDialog');
        var saveUrl = _CTX_ + _PATH_ + '/save';
        var form = modal.find("form");
        var _callback;
        var _entity;

        var btnSave = modal.find("#btnSave");

        _dictKit.initSelect(modal.find("select#rank"), "OrgnazationRank");

        btnSave.click(function () {
            form.find("#rank").removeAttr("disabled");
            form.ajaxSubmit({
                url: saveUrl,
                type: "POST",
                dataType: "json",
                cache: false,
                success: function (ret) {
                    if (ret.state == "ok") {
                        if (_callback && typeof(_callback) == 'function') {
                            result = _callback(ret);
                            if (typeof(result) == 'undefined' || result != false) {
                                modal.modal('hide');
                            }else{
                                if (_entity.parentRank && _entity.parentRank == "depart") {
                                    form.find("#rank").attr("disabled",true);
                                    form.find("#rank").val("depart");
                                }
                            }
                        }
                    } else {
                        if (_entity.parentRank && _entity.parentRank == "depart"){
                            form.find("#rank").attr("disabled",true);
                            form.find("#rank").val("depart");
                        }
                        alert(ret.msg);
                    }
                }
            });
        });

        return {
            show: function (entity, options) {
                _entity = entity;
                if (options.title) {
                    modal.find(".modal-title").html(options.title);
                }
                if (options && options.callback) {
                    _callback = options.callback;
                }
                _FormKit_.bindData(form, entity, "entity", options.readOnly);
                if (_entity.parentRank && _entity.parentRank == "depart"){
                    var $rankSelector = form.find("#rank");
                    $rankSelector.val("depart");
                    $rankSelector.attr("disabled",true);
                } else {
                    form.find("#rank").removeAttr("disabled");
                }
                modal.modal('show');
            }
        }

    }();
</script>
<script>
    <!-- 页面js,请自行将js内容导出到js文件中 -->
    $(document).ready(function () {
        var _listUrl = _CTX_ + _PATH_ + '/list';
        var _batchDeteleUrl = _CTX_ + _PATH_ + '/batchDelete';

        $('#jstree').jstree({
            'core': {
                'data': function (obj, callback) {
                    var params = {"parentId": obj.id};
                    if (obj.original && obj.original.rank == "depart") {
                        params["rank"] = "depart";
                    }
                    $.ajax({
                        "url": _listUrl,
                        "type": "POST",
                        "data": params,
                        "async": true,
                        "cache": false,
                        "dataType": "json"
                    }).done(function (ret) {
                        if (ret.state == 'ok') {
                            var nodes = [];
                            for (var index in ret.data) {
                                nodes.push({
                                    "id": ret.data[index].uuid,
                                    "text": ret.data[index].name,
                                    "rank": ret.data[index].rank,
                                    "children": (ret.data[index].childrenCount > 0 ? true : false)
                                });
                            }
                        }
                        callback.call(this, nodes);
                    });
                }
            }
        }).on(
            {
                'loaded.jstree': function (e, data) {
                    var inst = data.instance;
                    if(e.target.firstChild && e.target.firstChild.firstChild && e.target.firstChild.firstChild.lastChild) {
                        var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);
                        inst.select_node(obj);
                        $("#s_parentId").val(obj.id);
                        $('#s_parentRank').val(obj.original.rank);
                        $('#table').bootstrapTable("refresh");
                    }
                },
                "activate_node.jstree": function (node, event) {
                    $("#s_parentId").val(event.node.id);
                    $('#s_parentRank').val(event.node.original.rank);
                    $('#table').bootstrapTable("refresh");
                }
            }
        );

        function refreshTreeSelected(){
            var jsTree = $('#jstree').jstree();
            var nodes = jsTree.get_selected(true);
            $.each(nodes,function(i,node){
                jsTree.refresh_node(node);
            });
        }

        $('#table').bootstrapTable({
            url: _listUrl,
            method: 'post',
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            queryParams: function () {
                //每次查询时传入后台的查询条件
                return {"parentId": $("#s_parentId").val()}
            },
            pagination: true,
            pageNumber: 1,
            pageSize: 20,
            pageList: [20, 50, 100],
            clickToSelect: true,
            search: true,
            searchOnEnterKey: true,
            showRefresh: true,
            toolbar: '#toolbar',
            columns: [{
                checkbox: true
            }, {
                field: 'uuid',
                title: '主键',
                visible: false,
                searchable: false
            }, {
                field: 'name',
                title: '名称'
            }, {
                field: 'fullName',
                title: '全称'
            }, {
                field: 'rank',
                title: '级别',
                searchable: false,
                formatter: function (value, row, index, field) {
                    return _dictKit.getLabel("OrgnazationRank", value);
                }
            }, {
                field: 'sign',
                title: '标识'
            }]
        });

        $('#btnAdd').click(function () {
            orgnazationDialog.show({
                "parentId": $("#s_parentId").val(),
                "parentRank": $("#s_parentRank").val()
            }, {
                "title": "新增组织机构",
                "callback": function () {
                    refreshTreeSelected();
                    $('#table').bootstrapTable("refresh");
                }
            });
        });

        $('#btnEdit').click(function () {
            var selections = $('#table').bootstrapTable('getSelections');
            if (selections && selections.length == 1) {
                orgnazationDialog.show($.extend(selections[0], {"parentRank": $("#s_parentRank").val()}), {
                    "title": "编辑组织机构",
                    "callback": function () {
                        refreshTreeSelected();
                        $('#table').bootstrapTable("refresh");
                    }
                });
            } else {
                alert("只能选择一个");
            }
        });

        $('#btnDelete').click(function () {
            var selections = $('#table').bootstrapTable('getSelections');
            if (selections) {
                var pkArray = [];
                for (var i in selections) {
                    pkArray.push(selections[i].uuid);
                }
                $.ajax({
                    url: _batchDeteleUrl,
                    type: 'POST',
                    data: $.param({"uuids": pkArray}, true),
                    cache: false,
                    dataType: 'json',
                    success: function (ret) {
                        if (ret.state == 'ok') {
                            alert("删除成功");
                            refreshTreeSelected();
                            $('#table').bootstrapTable('refresh');
                        } else {
                            alert(ret.msg);
                        }
                    }
                });
            }
        });

        $('#jstree').css({'height': calcSuitableHeight($('#jstree'),450,30), 'overflow': 'auto'});
        $('#table').bootstrapTable("resetView", {height: calcTableHeight($('#table'),450,30,63)});

        $(window).bind('resize', function () {
            $('#jstree').css({'height': calcSuitableHeight($('#jstree'),450,30), 'overflow': 'auto'});
            $('#table').bootstrapTable("resetView", {height: calcTableHeight($('#table'),450,30,63)});
        });

    })
</script>
#end

#define content()
<div class="row">
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h2>组织机构树</h2>
            </div>
            <div class="ibox-content">
                <div id="jstree">
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-lg-9">
        <div class="ibox float-e-margins nomargin">
            <div class="ibox-title">
                <h2>组织机构</h2>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!-- Example Rowstyle -->
                        <div class="example-wrap margin-sm-0">
                            <div class="example">
                                <div id="toolbar" class="btn-group">
                                    <button id="btnAdd" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btnEdit" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btnDelete" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <input type="hidden" id="s_parentId" name="parentId" value="-"/>
                                <input type="hidden" id="s_parentRank" name="parentRank" value="-"/>
                                <table id="table">
                                </table>
                            </div>
                        </div>
                        <!-- End Example Rowstyle -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 编辑新增对话框,如有需要请导出到对应的对话框文件中 -->
<div id="orgnazationDialog" class="modal inmodal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑组织机构</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal" role="form">
                        <div class="col-md-12">
                            <input type="hidden" data-bind id="uuid" name="entity.uuid"/>
                            <input type="hidden" data-bind class="form-control" id="parentId" name="entity.parentId"/>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" data-bind class="form-control" id="name" name="entity.name"
                                           placeholder="请输入名称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">全称：</label>
                                <div class="col-sm-10">
                                    <input type="text" data-bind class="form-control" id="fullName"
                                           name="entity.fullName"
                                           placeholder="请输入全称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">级别：</label>
                                <div class="col-sm-10">
                                    <select data-bind class="form-control" id="rank" name="entity.rank"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">编号：</label>
                                <div class="col-sm-10">
                                    <input type="text" data-bind class="form-control" id="sign" name="entity.sign"
                                           placeholder="请输入编号">
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="btnSave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
#end